<template>
	<div class="math-icons" style="text-align: left; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap;">
		<span v-for="item in mathData" :key="item.id" @click="insertFormat(item.content)" :style="{'width': item.width}">{{item.id}}</span>
	</div>
	<div @blur="blurText()" style="height: 100px; overflow-y: auto;" contenteditable class="editWindow" :id="id">{{mathText}}</div>
	<div :id="showId" v-html="svgText" style="height: 120px;display: flex; justify-content: center; align-items: center;"></div>
	<div style="display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
		<button @click="submitData(true)">取消</button>
		<button @click="submitData(false)">插入</button>
	</div>
</template>

<script>
	import '../plugins/mathjax.js'
	import 'mathjax/es5/tex-svg'
	import $ from 'jquery'
	import mathData from '../plugins/MathData.js'
	import { v4 as uuidv4 } from 'uuid'
	export default {
		props: {
			content: {
				type: String,
				default: () => ""
			},
			submitFomart: {
				type: Function,
				default: () => {return (svg, formate, imgBase64) => {}}
			},
			modelValue: {
				type: Boolean,
				default: () => true
			}
		},
		emits: ['update:modelValue'],
		watch: {
			content: {
				handler(newValue, oldValue) {
					console.log(newValue)
					if (newValue == null || newValue == undefined) {
						this.mathText = '';
					} else {
						this.mathText = newValue;
						setTimeout(() => {
							this.getSvg();
						}, 500);
					}
				},
				immediate: true,
				deep: true
			},
		},
		data() {
			return {
				mathText: '',
				svgText: '',
				mathData,
				range: null,
				id: uuidv4().replaceAll(/-/g, ''),
				showId: uuidv4().replaceAll(/-/g, ''),
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			init () {
				MathJax.typesetPromise();
				this.getSvg(null);
				$("#" + this.id).focus();
			},
			blurText() {
				this.range = window.getSelection().getRangeAt(0);
				this.getSvg();
			},
			getSvg(backMethod) {
				this.mathText = document.getElementById(this.id).innerText;
				const svg = MathJax.tex2svg(this.mathText, {display: true});
				// console.log(this.svgText)
				this.svgText = svg.firstChild.outerHTML;
			},
			insertFormat(con) {
				let textNode = document.createTextNode(con);
				this.range.insertNode(textNode);
				this.getSvg();
				let range = document.createRange();
				range.selectNodeContents(textNode);
				range.collapse(false);
				let sel = window.getSelection();
				sel.removeAllRanges();
				sel.addRange(range);
				$("#" + this.id).focus()
			},
			insertAt(originalString, insertPosition, insertContent) {
			    return `${originalString.slice(0, insertPosition)}${insertContent}${originalString.slice(insertPosition)}`;
			},
			generatorSvgBase64() {
				let child = $("#" + this.showId).children();
				if (child.length == 0) return "data:image/svg+xml;base64,";
				let serializer = new XMLSerializer();
				let svg64 = btoa(unescape(encodeURIComponent(child[0].outerHTML)));
				let image64 = 'data:image/svg+xml;base64,' + svg64;
				return image64;
			},
			submitData(isCancel=false) {
				let _this = this;
				if (isCancel) {
					_this.$emit('update:modelValue', false);
					return;
				}
				// 这里进行生成图片，同时生成base64
				let image64 = this.generatorSvgBase64();
				if (this.submitFomart) {
					this.submitFomart(this.svgText, this.mathText, image64);
				}
				_this.$emit('update:modelValue', false);
			}
		},
	}
</script>

<style>
	.math-icons span {
		width: 40px;
	}
	.editWindow {
		text-align: left;
		box-shadow: 3px 3px 3px #00000014,
					 3px -3px 3px #00000014,
					 -3px 3px 3px #00000014,
					 -3px -3px 3px #00000014;
		padding: 20px;
	}
</style>